<div ng-cloak class="pad">
    <div class="row">
        <h3 class="col-sm-12">Entity Audits</h3>
    </div>
    <jhi-alert></jhi-alert>
    <div class="row">
        <div class="col-md-12 pad">
            <h4>Filter</h4>

            <form name="auditForm" role="form" novalidate show-validation>
                <div class="row">
                    <div class="col-md-8 form-group">
                        <label>Entity/Table</label>
                        <select class="input-sm form-control" name="qualifiedName" id="qualifiedName" required
                                ng-options="vm.getEntityName(entity) for entity in vm.entities"
                                ng-model="vm.qualifiedName"></select>
                        <div ng-show="auditForm.qualifiedName.$invalid">
                            <p class="help-block" ng-show="auditForm.qualifiedName.$error.required">
                                This field is required
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4 form-group">
                        <label>Limit to</label>
                        <select class="input-sm form-control" name="limit" id="limit" required
                                ng-options="option for option in vm.limits"
                                ng-model="vm.limit"></select>
                    </div>
                </div>
                <div class="row pad">
                    <button ng-disabled="auditForm.$invalid"
                            class="btn btn-primary pull-right" ng-click="vm.loadChanges()"><i
                        class="glyphicon glyphicon-import"></i>&nbsp;Load Change List
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div ng-show="!vm.loading" >
        <div class="table-responsive" ng-if="vm.audits.length > 0">
            <p ng-if="vm.qualifiedName">Last <strong>{{vm.limit}}</strong> Changes for <strong>{{vm.getEntityName(vm.qualifiedName)}}</strong></p>
            <form class="form-inline">
              <div class="form-group">
                <label for="searchField">Filter:</label>
                <input type="text" class="form-control" id="searchField" ng-model="filter.$" placeholder="global filter">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" id="searchFieldEntityId" ng-model="filter.entityId" placeholder="entity id filter">
              </div>
            </form>
            <table class="table table-bordered table-hover table-striped" >
                <thead>
                    <tr>
                        <th>Entity Id</th>
                        <th>Action</th>
                        <th>Version</th>
                        <th>Value</th>
                        <th>Modified Date</th>
                        <th>Modified By</th>
                        <th><i class="glyphicon glyphicon-eye-open"></i></th>
                    </tr>
                </thead>
                <tbody>
                <tr ng-repeat="audit in vm.audits | filter:filter">
                    <td>{{audit.entityId}}</td>
                    <td>{{audit.action}}</td>
                    <td>{{audit.commitVersion}}</td>
                    <td><pre class="audit-obj" ng-bind-html="vm.format(audit.entityValue)"></pre></td>
                    <!-- comment above line and uncomment below to have Table view of value -->
                    <!--td class="no-pad">
                        <div class="audit-obj">
                            <table class="table table-bordered table-hover no-margin">
                                <tr>
                                    <th>Field</th>
                                    <th>Value</th>
                                </tr>
                                <tr ng-repeat="(k,v) in audit.entityValue" ng-if="!vm.isObject(v)">
                                    <td>{{k}}</td>
                                    <td>
                                        <span ng-if="vm.isDate(k)">{{v | date:'medium'}}</span>
                                        <span ng-if="!vm.isDate(k)">{{v}}</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td-->
                    <td>{{audit.modifiedDate | date:'medium'}}</td>
                    <td>{{audit.modifiedBy}}</td>
                    <td>
                        <button type="button" ng-click="vm.openChange(audit)"
                                uib-tooltip="View Audit Change Details" uib-tooltip-placement="auto"
                                class="btn btn-info btn-xs">
                            <i class="glyphicon glyphicon-eye-open"></i>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <p ng-if="vm.displayedChanges.length == 0">No Data found for the filters</p>
    </div>
</div>
